<template>
  <div class="person">
    <h2>
      姓名：{{ student.name }}
      年龄：{{ student.age }}
      座驾：{{ student.car.c1}}/{{ student.car.c2 }}
    </h2>
    <button @click="sum1">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar">修改汽车</button>
    <button @click="changeCarMode">修改汽车模型</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'

let student = reactive({
  name : '李四',
  age : 18,
  car:{
    c1:'宝马',
    c2:'奥迪'
  }
})
//修改全量名称为ref类型数据
function sum1() {
//  student = {name:'王八',age:99}
Object.assign(student,{name:'666',age:999})
}

function changeAge(){
  student.age += 1;
}

function changeCar(){
  student.car.c1 = '保时捷'
}

function changeCarMode(){
  student.car = {
    c1: '雅迪',
    c2:'奥拓'
  }
}
//监视对象中的某个属性，直接写函数
// watch(()=>{return student.age },(newVal,oldVal) => {
//  console.log(newVal,oldVal);
// })

watch(()=> {return [student.car,student.age]},(oldv,newv)=>{
  console.log(oldv,newv);
  
} )


</script>